نمایش فرم مودال (Pop up) در بلیزر چگونه است ؟

پاسخ هوش مصنوعی

برای نمایش یک فرم مودال در Blazor، شما می توانید از یک کامپوننت مودال استفاده کنید. در زیر نمونه ای از کد مورد نیاز برای ایجاد و نمایش یک مودال آورده شده است.

ابتدا یک کامپوننت مودال ایجاد کنید:

@code {
    [Parameter]
    public bool IsVisible { get; set; }

    [Parameter]
    public EventCallback IsVisibleChanged { get; set; }

    private void Close()
    {
        IsVisible = false;
        IsVisibleChanged.InvokeAsync(IsVisible);
    }
}


    

        

            

                
عنوان مودال
                ×
            
            

                
محتوای مودال شما در اینجا قرار می گیرد.
            
            

                بستن
            
        
    

سپس در صفحه ای که می خواهید مودال را نمایش دهید، کامپوننت مودال را فراخوانی کنید:

@page "/yourpage"
@using YourNamespace

@code {
    private bool showModal = false;

    private void ShowModal()
    {
        showModal = true;
    }
}

نمایش مودال

در آخر، می توانید استایل های CSS مناسب برای مودال را اضافه کنید:

/* styles.css */
.modal {
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}
.modal.show {
    display: block;
}
.modal-dialog {
    margin: 10% auto;
    max-width: 500px;
}

به این ترتیب، شما می توانید یک فرم مودال یا Popup را در Blazor نمایش دهید.

نمایش فرم مودال (Pop up) در بلیزر چگونه است ؟

برای نمایش فرم های Modal یا Pop up یک مثال براتون مینویسم. شما میتونید از کتابخانه Bulma برای نمایش فرم های Modal استفاده کنید. بنابراین سایت Bulma.io رو باز کنید. خب حالا به قسمت Modal برید. در این قسمت انواع و اقسام کدها برای نمایش فرم Modal وجود داره.

خب حالا در ویژوال استودیو یک Component به نام DialogComponent.razor ایجاد کنید. و کدهای زیر رو درون این کامپوننت پیست کنید. این کدها از همون لینک که در بالا برای Modal معرفی شد انتخاب شده. البته کدهای سی شارپ رو خودمون نوشتیم.

@if (display)
{
 <div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close" @onclick="(() => {
                                                                    close();
                                                                  })"></button>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>
}

@code
{
   private bool display = false;

   public void show()
   {
      this.display = true;
      StateHasChanged();
   }
  
   public void close()
   {
      this.display = false;
      StateHasChanged();
   }
}

خب حالا باید از این کامپوننت در یک جا استفاده بشه. بنابراین یک razor page به نام mymodal.razor ایجاد می کنیم و کدهای زیر رو می نویسیم. در واقع در این کدها کامپوننت بالا رو صدا زدیم.

@page "/mymodal"

<button class="btn btn-primary" @onclick="(() => {
                                                   dialog.show();
                                                 })">Show Modal</button>
<DialogComponent @ref="dialog"></DialogComponent>

@code{
   private DialogComponent dialog;
   
}

خب حالا اگر پروژه رو اجرا کنید و روی دکمه Show Modal کلیک کنید باید فرم مودال برای شما نمایش داده بشه.